import { Flex, Radio, RadioGroupField } from '@aws-amplify/ui-react';

import { RadioGroupFieldDemo } from './demo';
import { Example, ExampleCode } from '@/components/Example';
import { Fragment } from '@/components/Fragment';
import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
import ThemeExample from '@/components/ThemeExample.mdx';

import {
  BasicExample,
  ControlledExample,
  DirectionExample,
  DisabledExample,
  ErrorExample,
  LabelPositionExample,
  ReadOnlyExample,
  SizeExample,
  RadioGroupFieldThemeExample,
} from './examples';

## Demo

<RadioGroupFieldDemo />

## Usage

Import the Radio and RadioGroupField components, and nest the Radio options inside the RadioGroupField. 

RadioGroupField requires both `label` and `name` for accessibility and form submission, respectively. Radio only requires the `value` prop, which will be submitted with form data. 

You also have the option to set a Radio as pre-selected by passing its `value` to the `defaultValue` prop on the RadioGroupField. 

<Example>
  <BasicExample />
  <ExampleCode>

```jsx file=./examples/BasicExample.tsx

```

  </ExampleCode>
</Example>

### Controlled component

To manually control the RadioGroupField state, you can use the `value` and `onChange` props. 

<Example>
  <ControlledExample />
  <ExampleCode>

```jsx file=./examples/ControlledExample.tsx

```

  </ExampleCode>
</Example>

### Sizes

Use the `size` prop to change the RadioGroupField size. Available options are `small`, `large`, and none (default).

<Example>
  <SizeExample />
  <ExampleCode>

```jsx file=./examples/SizeExample.tsx

```

  </ExampleCode>
</Example>

### Direction

Use the `direction` prop to change the RadioGroupField direction. Available options are `row` and `column` (default).

<Example>
  <DirectionExample />
  <ExampleCode>

```jsx file=./examples/DirectionExample.tsx

```

  </ExampleCode>
</Example>

### Label position

Use the `labelPosition` prop to control where the label is in relation to the Radio. You may pass `labelPosition` to either the RadioGroupField or individual Radios.

<Example>
  <LabelPositionExample />
  <ExampleCode>

```jsx file=./examples/LabelPositionExample.tsx

```

  </ExampleCode>
</Example>

### State

The available RadioGroupField states include `isDisabled` and `isReadOnly`. A disabled field will be not be focusable not mutable and will not be submitted with form data. A readonly field cannot be edited by the user, but will be submitted with form data.

#### Disabled radios and radio group

<Example>
  <DisabledExample />
  <ExampleCode>

```jsx file=./examples/DisabledExample.tsx

```

  </ExampleCode>
</Example>

#### Read-only radio group

<Example>
  <ReadOnlyExample />
  <ExampleCode>

```jsx file=./examples/ReadOnlyExample.tsx

```

  </ExampleCode>
</Example>

### Validation error

Use the `hasError` and `errorMessage` props to mark a RadioGroupField as having a validation error.

<Example>
  <ErrorExample />
  <ExampleCode>

```jsx file=./examples/ErrorExample.tsx

```

  </ExampleCode>
</Example>

### Accessibility / Label behavior

<Fragment>{() => import('./../shared/formFieldAccessibility.mdx')}</Fragment>

## CSS Styling

<ThemeExample component="RadioGroupField" link="radioGroup">
  <Example>
    <RadioGroupFieldThemeExample />
    
    <ExampleCode>

    ```tsx file=./examples/RadioGroupFieldThemeExample.tsx

    ```

    </ExampleCode>
  </Example>
</ThemeExample>

### Target classes

<ComponentStyleDisplay componentName="RadioGroupField" />

### Global styling

To override styling on all Radio buttons, you can set the Amplify CSS variables or use the built-in `.amplify-radio__button` class.

<RadioGroupField
  label="Colors"
  name="colors"
  defaultValue="a"
  labelHidden
  className="global-radio-styling"
>
  <Radio value="a">
    A
  </Radio>
  <Radio value="b">
    B
  </Radio>
  <Radio value="c">
    C
  </Radio>
</RadioGroupField>

```css
/* styles.css */
[data-amplify-theme] {
  --amplify-components-radio-button-background-color: green;
  --amplify-components-radio-button-border-color: lightgreen;
}
/* OR */
.amplify-radio__button {
  background-color: green;
  border-color: lightgreen;
}
```

To replace Radio button styling, unset it:

```css
.amplify-radio__button {
  all: unset;
  /* Add your styling here*/
}
```

### Local styling

To override styling on a specific Radio, you can use (in order of increasing specificity): a class selector, data attributes, or style props.

_Using a class selector:_

<Example>
  <RadioGroupField
    label="Colors"
    name="colors"
    defaultValue="red"
    labelHidden
  >
    <Radio value="red" className="custom-radio">
      Red
    </Radio>
    <Radio value="orange" className="custom-radio">
      Orange
    </Radio>
    <Radio value="yellow" className="custom-radio">
      Yellow
    </Radio>
  </RadioGroupField>
  
  <ExampleCode>

```css
/* styles.css */
.custom-radio .amplify-radio__input:checked + .amplify-radio__button {
  background-color: orange;
  border-color: red;
  color: yellow;
}
```

```jsx
import { Radio, RadioGroupField } from '@aws-amplify/ui-react';

<RadioGroupField label="Language" name="language" defaultValue="html">
  <Radio value="html" className="custom-radio">
    html
  </Radio>
</RadioGroupField>;
```

  </ExampleCode>
</Example>

_Using data attributes:_

```css
/* styles.css */

/* Override only large size styles */
.amplify-radiogroupfield[data-size='large'] {
  font-size: 1.25rem;
}
```